<template>
  <div>
    <div style="" id="calendar"></div>
    <!-- <div @click='x()'>123</div> -->
    <div id="sign_note" style="text-align:center;position: relative;padding: 15px;    font-size: 14px;">
      <span style="color:red;">*规则：本月签到21天即可领取奖品</span>
    </div>
  </div>
</template>
<script>
  let _this;

  export default {
    data() {
      return {
        signList: [{"signDay": "09"}, {"signDay": "11"}, {"signDay": "12"}, {"signDay": "13"}],
        showYear: 2015,
        showMonth: 1,
        showDays: 1,
        eventName: 'load'
      }
    },
    created() {
      _this = this;
      let $ = require('jquery');
      window.$ = $;
    },
    mounted: function () {
      this.init(this.signList);
      let dom = document.getElementsByName('name');
      let arr = Array.prototype.slice.call(dom);
      for (let i = 0, l = arr.length; i < l; i++) {
        arr[i].onclick = function () {
          //ajax获取日历json数据
          let signList = [];
          let tmp = {"signDay": $(this).html()};
          if (typeof(signList) == 'undefined') {
            //不做处理
          } else {
            signList.splice('', '', tmp);
            _this.init(signList);
          }
          _this.init(signList, tmp);

        }
      }
    },
    methods: {
      init: function (signList, s = '') {
        this.setMonthAnDay();
        if (typeof(s) == 'undefined') {

        } else {
          signList.splice('', '', s);
        }
        this.draw(signList);
      },
      setMonthAnDay: function () {
        switch (this.eventName) {
          case "load":
            let current = new Date();
            this.showYear = current.getFullYear();
            this.showMonth = current.getMonth() + 1;
            break;
        }
      },
      draw: function (signList) {
        if (signList.length > 21) {
          $("#sign_note").empty();
          $("#sign_note").html('<button class="sign_contener" type="button"><i class="fa fa-calendar-check-o" aria-hidden="true"></i>&nbsp;已达标，获取1次抽奖</button>');
        }
        let str = this.drawCal(this.showYear, this.showMonth, signList);
        $("#calendar").html(str);
        let calendarName = this.showYear + '年' + this.showMonth + '月';
        $('.calendar_month_span').html(calendarName);
      },
      getDaysInmonth: function (iMonth, iYear) {
        let dPrevDate = new Date(iYear, iMonth, 0);
        return dPrevDate.getDate();
      },
      buildCal: function (iYear, iMonth) {
        let aMonth = new Array();
        aMonth[0] = new Array(7);
        aMonth[1] = new Array(7);
        aMonth[2] = new Array(7);
        aMonth[3] = new Array(7);
        aMonth[4] = new Array(7);
        aMonth[5] = new Array(7);
        aMonth[6] = new Array(7);
        let dCalDate = new Date(iYear, iMonth - 1, 1);
        let iDayOfFirst = dCalDate.getDay();
        console.log(iDayOfFirst);
        let iDaysInMonth = this.getDaysInmonth(iMonth, iYear);
        let iletDate = 1;
        let d, w;
        aMonth[0][0] = "日";
        aMonth[0][1] = "一";
        aMonth[0][2] = "二";
        aMonth[0][3] = "三";
        aMonth[0][4] = "四";
        aMonth[0][5] = "五";
        aMonth[0][6] = "六";
        for (d = iDayOfFirst; d < 7; d++) {
          aMonth[1][d] = iletDate;
          iletDate++;
        }
        for (w = 2; w < 7; w++) {
          for (d = 0; d < 7; d++) {
            if (iletDate <= iDaysInMonth) {
              aMonth[w][d] = iletDate;
              iletDate++;
            }
          }
        }
        return aMonth;
      },
      ifHasSigned: function (signList, day) {
        let signed = false;
        $.each(signList, function (index, item) {
          if (item.signDay == day) {
            signed = true;
            return false;
          }
        });
        return signed;
      },
      drawCal: function (iYear, iMonth, signList) {
        let myMonth = this.buildCal(iYear, iMonth);
        let htmls = new Array();
        htmls.push("<div class='sign_main' id='sign_layer'>");
        htmls.push("<div class='sign_succ_calendar_title'>");
        //htmls.push("<div class='calendar_month_next'>下月</div>");
        //htmls.push("<div class='calendar_month_prev'>上月</div>");
        htmls.push("<div class='calendar_month_span'></div>");
        htmls.push("</div>");
        htmls.push("<div class='sign_equal' id='sign_cal'>");
        htmls.push("<div class='sign_row'>");
        htmls.push("<div class='th_1 bold'>" + myMonth[0][0] + "</div>");
        htmls.push("<div class='th_2 bold'>" + myMonth[0][1] + "</div>");
        htmls.push("<div class='th_3 bold'>" + myMonth[0][2] + "</div>");
        htmls.push("<div class='th_4 bold'>" + myMonth[0][3] + "</div>");
        htmls.push("<div class='th_5 bold'>" + myMonth[0][4] + "</div>");
        htmls.push("<div class='th_6 bold'>" + myMonth[0][5] + "</div>");
        htmls.push("<div class='th_7 bold'>" + myMonth[0][6] + "</div>");
        htmls.push("</div>");
        let d, w;
        for (w = 1; w < 6; w++) {
          htmls.push("<div class='sign_row'>");
          for (d = 0; d < 7; d++) {

            let ifHasSigned = this.ifHasSigned(signList, myMonth[w][d]);
            console.log("001:" + ifHasSigned);
            if (ifHasSigned && typeof(myMonth[w][d]) != 'undefined') {
              htmls.push("<div class='td_" + d + " on'>" + (!isNaN(myMonth[w][d]) ? myMonth[w][d] : " ") + "</div>");
            } else {
              htmls.push("<div name='name' class='td_" + d + " calendar_record'>" + (!isNaN(myMonth[w][d]) ? myMonth[w][d] : " ") + "</div>");
            }
          }
          htmls.push("</div>");
        }
        htmls.push("</div>");
        htmls.push("</div>");
        htmls.push("</div>");
        return htmls.join('');
      }
    }
  }
</script>
<style>
  .singer_r_img {
    display: block;
    line-height: 45px;
    background: url(../../static/images/sign_have.gif) right 2px no-repeat;
    vertical-align: middle;
    margin-bottom: -10px;
    text-decoration: none;
  }

  .singer_r_img:hover {
    background-position: right -53px;
    text-decoration: none;
  }

  .singer_r_img span {
    margin-left: 14px;
    font-size: 16px;
    font-family: 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif !important;
    font-weight: 700;
    color: #165379;
  }

  .singer_r_img.current {
    background: url(../../static/images/sign_have.gif) no-repeat 0 2px;
    border: 0;
    text-decoration: none;
  }

  .sign_succ_calendar_title {
    text-align: center;
    /*width: 398px;*/
    border-left: 1px solid #e3e3e3;
    border-right: 1px solid #e3e3e3;
    background: #fff;
  }

  .sign_main {
    /*width: 400px;*/
    /**background-color: #FBFEFE;**/
    border-top: 1px solid #e3e3e3;
    font-family: "Microsoft YaHei", SimHei;
    display: block;
  }

  .calendar_month_span {
    display: inline;
    line-height: 40px;
    font-size: 16px;
    color: #656565;
    letter-spacing: 2px;
    font-weight: bold;
  }

  .sign_equal {
    display: table;
    border-collapse: separate;
    width: 100%;
  }

  .sign_row {
    display: table-row;
  }

  .sign_row div {
    display: table-cell;
    width: 14.3%;
    border-top: 1px solid #e3e3e3;
    /*border-bottom: 1px solid #e3e3e3;*/
    border-left: 1px solid #e3e3e3;
    height: 40px;
    text-align: center;
    line-height: 40px;
  }

  .sign_row .bold {
    font-weight: bold;
  }

  .sign_row div:last-child {
    border-right: 1px solid #e3e3e3;
  }

  .sign_equal .sign_row:last-child div {
    border-bottom: 1px solid #e3e3e3;
  }

  .sign_equal .on {
    background: url(../../static/images/sign_have.gif) no-repeat center;
  }

  .sign_contener, .sign_contener:visited {
    line-height: 30px;
    background: #00a0e9;
    border: none;
    color: white;
    border-radius: 30px;
    padding: 0 10px;
    font-size: 16px;
  }

  .sign_contener:hover {
    background-color: red;
  }

</style>
